<template>
  <div class="home">
    <!-- 头部区域 -->
    <div class="header">
      <!-- 头部标题 -->
      <van-sticky>
        <van-nav-bar title="杰普点餐" />
      </van-sticky>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeData" :key="item.id">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="category">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in categoryData"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="toProductPage(item)"
        />
      </van-grid>
    </div>
    <!-- 产品展示 -->
    <div class="productShow">
      <van-card
        v-for="item in productData"
        :key="item.id"
        tag="热销"
        :price="item.price + '.00'"
        :desc="item.description"
        :title="item.name"
        :thumb="item.photo"
        origin-price="10.00"
        @click="searchProDetail(item)"
      />
    </div>
    <!-- 弹出面板 -->
    <van-action-sheet v-model="show" :title="actionTitle">
      <!-- 定义的结构 -->
      <div>
        <!-- 商品图片 -->
        <!-- 价格 -->
        <!-- 描述 -->
      </div>
    </van-action-sheet>
    <div style="height: 100px"></div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/http/axios";
// 引入辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 轮播图数组
      swipeData: [],
      // 控制弹出面板是否显示
      show: false,
      // 弹出框的标题
      actionTitle:''
    };
  },
  // 生命周期函数
  created() {
    // 页面加载时 自动执行方法 获取对应的数据
    this.getSwipeData();
    // 直接调用Vuex中的方法
    // 获取栏目数据
    this.getCategoryDataVuex({
      page: 1,
      pageSize: 200,
    });
    // 获取产品数据
    this.getProductDataVuex({
      page:1,
      pageSize: 10
    })
  },
  methods: {
    // 使用辅助函数调用vuex中的方法
    ...mapActions("category", ["getCategoryDataVuex"]),
    ...mapActions("product", ["getProductDataVuex"]),
    // 获取所有的轮播图数据
    async getSwipeData() {
      // 发送网络请求
      let res = await get("/carousel/findAll ");
      // console.log(res);
      // 对应数据的赋值
      this.swipeData = res.data.data;
    },
    // 弹出动态面板 显示产品的详情信息
    searchProDetail(proObj){
      this.show = true
      console.log(proObj.name);
      this.actionTitle = proObj.name
    },
    // 跳转到产品页面
    toProductPage(category){
      // 路由跳转
      // 确定侧边导航栏的一个定位的值
      // 跳转过去后的 产品分类对应的id
      this.$router.push({
        path:'/manager/product',
        query:{
          activeKey: category.num - 1,
          productCategoryId: category.id
        }
      })
    }
  },
  computed: {
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
};
</script>

<style scoped>
/* 设置轮播图图片的样式 */
.swipe img {
  width: 100%;
  height: 200px;
}
/* 设置弹出框的样式 */
.van-action-sheet{
  height: 400px;
}
</style>